import { createStyles } from 'antd-style';
import React from 'react';
import {
  CommentOutlined,
  FireOutlined,
  HeartOutlined,
  ReadOutlined,
  SmileOutlined,
  UserOutlined,
  OpenAIOutlined,
  ShareAltOutlined,
  EllipsisOutlined,
} from '@ant-design/icons';
import { Badge, Button, Space, message, Flex } from 'antd';
import themeConfig from '@/core/themeConfig';

export const renderTitle = (icon, title) => (
  <Space align="start">
    {icon}
    <span>{title}</span>
  </Space>
);

export const useStyle = createStyles(({ token, css }) => {
  return {
    layout: css`
      width: 100%;
      min-width: 1000px;
      height: 100vh;
      border-radius: ${token.borderRadius}px;
      display: flex;
      background: ${token.colorBgContainer};
      font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;

      .ant-prompts {
        color: ${token.colorText};
      }
    `,
    menu: css`
      background: ${token.colorPrimary};
      width: 280px;
      height: 100%;
      display: flex;
      flex-direction: column;
      color: #fff;
    `,
    conversations: css`
      padding: 0 12px;
      flex: 1;
      overflow-y: auto;
    `,
    chat: css`
      height: 100%;
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      padding: ${token.paddingLG}px;
      gap: 16px;
    `,
    messages: css`
      flex: 1;
      textAlign: left;
      padding: 0 12px;
    `,
    placeholder: css`
      padding-top: 32px;
    `,
    sender: css`
      box-shadow: ${token.boxShadow};
    `,
    logo: css`
      display: flex;
      height: 72px;
      align-items: center;
      justify-content: start;
      padding: 0 24px;
      box-sizing: border-box;

      img {
        width: 100%;
        display: inline-block;
      }

      span {
        display: inline-block;
        margin: 0 8px;
        font-weight: bold;
        color: ${token.colorText};
        font-size: 16px;
      }
    `,
    addBtn: css`
      background: #1677ff0f;
      border: 1px solid #1677ff34;
      width: calc(100% - 24px);
      margin: 0 12px 24px 12px;
    `,
    'think-content': css`
      background-color: ${token.colorBgLayout};
      padding: ${token.padding}px;
      border-radius: ${token.borderRadius}px;
      margin: ${token.margin}px 0;
    `,
  };
});

export const defaultConversationsItems = [
  {
    key: '0',
    label: 'What is Ant Design X?',
  },
];

export const placeholderPromptsItems = [
  {
    key: '1',
    label: renderTitle(
      <FireOutlined
        style={{
          color: '#FF4D4F',
        }}
      />,
      'Hot Topics',
    ),
    description: 'What are you interested in?',
    children: [
      {
        key: '1-1',
        description: `What's new in X?`,
      },
      {
        key: '1-2',
        description: `What's AGI?`,
      },
      {
        key: '1-3',
        description: `Where is the doc?`,
      },
    ],
  },
  {
    key: '2',
    label: renderTitle(
      <ReadOutlined
        style={{
          color: '#1890FF',
        }}
      />,
      'Design Guide',
    ),
    description: 'How to design a good product?',
    children: [
      {
        key: '2-1',
        icon: <HeartOutlined />,
        description: `Know the well`,
      },
      {
        key: '2-2',
        icon: <SmileOutlined />,
        description: `Set the AI role`,
      },
      {
        key: '2-3',
        icon: <CommentOutlined />,
        description: `Express the feeling`,
      },
    ],
  },
  {
    key: '3',
    label: renderTitle(
      <ReadOutlined
        style={{
          color: '#1890FF',
        }}
      />,
      'Design Guide',
    ),
    description: 'How to design a good product?',
    children: [
      {
        key: '3-1',
        icon: <HeartOutlined />,
        description: `Know the well`,
      },
      {
        key: '3-2',
        icon: <SmileOutlined />,
        description: `Set the AI role`,
      },
      {
        key: '3-3',
        icon: <CommentOutlined />,
        description: `Express the feeling`,
      },
    ],
  },
];

export const senderPromptsItems = [
  {
    key: '1',
    description: 'Hot Topics',
    icon: (
      <FireOutlined
        style={{
          color: '#FF4D4F',
        }}
      />
    ),
  },
  {
    key: '2',
    description: 'Design Guide',
    icon: (
      <ReadOutlined
        style={{
          color: '#1890FF',
        }}
      />
    ),
  },
];

export const roles = {
  assistant: {
    placement: 'start',
    avatar: {
      icon: <OpenAIOutlined />,
      style: {
        background: '#fde3cf',
      },
    },
    typing: {
      step: 5,
      interval: 20,
    },
    styles: {
      content: {
        borderRadius: 16,
        background: '#f0f2f5',
      },
    },
    variant: 'shadow',
  },
  local: {
    variant: 'shadow',
    placement: 'end',
    styles: {
      content: {
        borderRadius: 16,
        background: '#f0f2f5',
      },
    },
    avatar: {
      icon: <UserOutlined />,
      style: {
        background: '#87d068',
      },
    },
  },
  suggestion: {
    placement: 'start',
    avatar: {
      icon: <UserOutlined />,
      style: {
        visibility: 'hidden',
      },
    },
    variant: 'borderless',
    messageRender: (items) => <Prompts vertical items={items} />,
  },
  file: {
    placement: 'start',
    avatar: {
      icon: <UserOutlined />,
      style: {
        visibility: 'hidden',
      },
    },
    variant: 'borderless',
    messageRender: (items) => (
      <Flex vertical gap="middle">
        {items.map((item) => (
          <Attachments.FileCard key={item.uid} item={item} />
        ))}
      </Flex>
    ),
  },
};

export const welcomeProps = {
  variant:"borderless",
  title:`您好，欢迎使用${themeConfig.TITLE}大模型平台在线体验工具`,
  description:"支持选择不同的模型及参数进行体验",
  className:"text-left",
  // extra:(
  //   <Space>
  //     <Button icon={<ShareAltOutlined />} />
  //     <Button icon={<EllipsisOutlined />} />
  //   </Space>
  // )
}
export const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
};

export const imageToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const reader = new FileReader();
    
    reader.onload = function(e) {
      img.src = e.target.result;
      img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const base64 = canvas.toDataURL('image/jpeg'); // 或 'image/png'
        resolve(base64);
      };
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
};